<template>
  <view class="content">
    <availableCountItem
      class="item"
      v-for="(item, index) in userStore.countCardList"
      :key="index"
      :item="item"
    ></availableCountItem>
    <view
      v-if="userStore.countCardList.length == 0"
      class="flexc flex-1 align-center justify-center"
    >
      <image class="empty-img" src="@/static/empty.png"></image>
      <view class="flexr align-center text-color2">
        暂无次卡~
      </view>
    </view>
  </view>
</template>

<script setup>
import availableCountItem from "@/subpages/widgets/availableCountItem.vue";
import { useUserStore } from "@/store/user";
import { onLaunch, onShow, onLoad } from "@dcloudio/uni-app";
const userStore = useUserStore();
onLoad(() => {
  userStore.getCountCardList();
});
</script>

<style lang="scss">
.content {
  padding-top: 32rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  overflow-y: scroll;
  .item + .item {
    margin-top: 20rpx;
  }
}
</style>
